<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch API示例</title>
    <script src="./js11_fetch.js" async></script>
    <link rel="stylesheet" href="../style/common.css">
</head>
<body>
    <h1>fetch()方法示例</h1>
    <p>数据参考网址：jsonplaceholder</p>
    <p class="msg"></p>
    <ul class="post"></ul>
    <p class="new_post"></p>
    <p><img src="" alt=""></p>
    <script>
        document.addEventListener("DOMContentLoaded",function(){
            let msg = document.querySelector(".msg");
            getPost(1).then(data=>{
                msg.innerHTML += data.title;
            });
            //读取多条
            let posts = document.querySelector(".posts");
            getPosts().then(data=>{
                data.slice(0,10).forEach((o)=>{
                    const li = document.createElement("li");
                    li.textContent = `${o.id} - ${o.title} - ${o.body}`;
                    posts.appendChild(li);
                });
            });
            
            //获取
            let newPost = document.querySelector(".new_post");
            createPost({title:"标题",body:"内容",userId:1}).then(data=>{
                newPost.innerHTML += JSON.stringify(data);
            });

            let img = document.querySelector("p>img");
            //跨域图片出不来
            // const imgUrl = "https://via.placeholder.com/600/92c952";
            const imgUrl = "https://cn.bing.com/images/search?view=detailV2&ccid=JsdB%2bxIF&id=340A1EAE949F80500312791E89E04FB107B7F278&thid=OIP.JsdB-xIFaNS6S5GbJMYLPQHaEo&mediaurl=https%3a%2f%2fwallpapercave.com%2fwp%2ffwoRcBN.jpg&exph=1200&expw=1920&q=bing&simid=608055481376666581&FORM=IRPRST&ck=D8F36FD5D780260E1423552F04CE93F5&selectedIndex=0&ajaxhist=0&ajaxserp=0";
            fetchImage(imgUrl).then(blob=>{
                const objectURL = URL.createObjectURL(blob);
                img.src= objectURL;
            })
            .catch((error)=>{
                console.log(error);
            })
        });
    </script>
</body>
</html>